<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <link rel="shortcut icon" href="img/smlogo.png" type="image/x-icon">
    <meta charset="UTF-8">
    <title>隐私设置</title>
    <link rel="stylesheet" href="css/index2.css"/>
    <style>
        .page_title{
            position: absolute;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
        }
        header+div{  margin-top:55px;  }
        .mysetpageimgbtn>img{
            width: 40px;
            height: 24px;
        }
        .InputCell .form_row .input_label {
            font-size: 14px;
            color: #999;
        }
        .payNumDiv{
            font-size:13px;
            text-align: center;
            background: #fff;
            padding: 10px;
            color:#999;
        }
        .payNumDiv>div{
            display: inline-block;
            width: 70px;
            border-bottom: 1px solid #ccc;
            margin-left: 5px;
            margin-right: 5px;
            box-sizing: border-box;
        }
        .payNumDiv input{  width:100%;  }
        #logo1:after {
            content: "";
            display: block;
            height: 12px;
            width: 12px;
            border: 2px solid #fff;
            border-bottom: 0;
            border-left: none;
            position: absolute;
            margin-top: -7.14285714px;
            margin-left: 14px;
            top: 50%;
            -webkit-transform: rotate(-135deg);
            -moz-transform: rotate(-135deg);
            -ms-transform: rotate(-135deg);
            transform: rotate(-135deg);
        }
        #page_wrapper .page_title{
            -webkit-transform: initial;
            -moz-transform: initial;
            -ms-transform: initial;
            -o-transform: initial;
            transform: initial;
            position: relative;
            left: initial;
            color:#fff;
            font-weight: bold;
        }
    </style>
    <style>
        #waitplace {
            width: 100%;
            z-index: 1000;
            left: 0;
            right: 0;
            position: fixed;
            top: 45%;
        }
        #waitplace>div {
            width: 80px;
            max-width: 240px;
            height: 80px;
            background: rgba(53,53,53,0.75);
            overflow: hidden;
            border-radius: 4px;
            margin: auto;
        }
        #waitplace>div>div:first-child {
            width: 80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
        }
        #waitplace>div>div:first-child>img {
            width: 44px;
            height: 44px;
            -webkit-animation: circle 1s infinite linear;
        }
        @-webkit-keyframes circle{0%{transform:rotate(0deg)}100%{transform:rotate(-360deg)}}
        .Header .fixed_header .header_main .page_title{
            padding-left:10px;
            text-align: left;
        }
        .Header{  background: #ececec;  }
        .btnDiv{
            margin: 20px 15px;
        }
        .btnDiv>div{
            width: 100%;
            box-sizing: border-box;
            background-color: rgb(230, 67, 64);
            color: #fff;
            line-height: 44px;
            height: 44px;
            padding: 0 10px;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .PageWrapper{background:#ececec;}
    </style>
</head>
<body>
<div class="PageWrapper mweb" id="page_wrapper" style="box-sizing: border-box;height:auto;overflow: auto;margin-top: 45px;">
    <div class="Header">
        <!-- 头部-->
        <div class="fixed_header">
            <div class="header_main">
                <a class="logo symbol_logo" id="logo1" onclick="history.go(-1)"></a>
                <!--<a class="logo symbol_logo" onclick="saveChange()" style="float: right;line-height: 44px;">确认</a>-->
                <div class="page_title" id="page_title">隐私</div>
            </div>
        </div>
        <div>
            <div class="Cell InputCell InputMixin">
        <span class="tc_inner" id="seeme">
            <div class="form_inputs">
                <p class="form_row">
                    <span class="input_label">允许他人查看我的资料及关注我</span>
                </p>
            </div>
            <div class="changephotobox mysetpageimgbtn">
                <img src="img/message_off.png" id="seemeimg1" style="display: block;">
                <img src="img/message_on.png" id="seemeimg2" style="display: none;">
            </div>
        </span>
                <div class="tc_stroke"></div>
            </div>
            <div class="payNumDiv">
                付<div><input type="number" min="1" id="moneyInput"/></div>元即可将发布的内容显示给我看
            </div>
            <p class="errorWord" style="text-align: center;height:20px;color:red;font-size: 15px;margin-top:10px;background: transparent;"></p>
        </div>
        <div id="waitplace" style="display: none;">
            <div>
                <div class="lf">
                    <img src="img/aoy.png">
                </div>
            </div>
        </div>
        <div class="btnDiv">
            <div onclick="saveChange()">确认</div>
        </div>
    </div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="ftnjs/urlnote.js"></script>
<script>
    var canSee=false;
    $("#seeme").click(function(){
        $(".errorWord").html("");
        if(document.getElementById("seemeimg1").style.display==="block"){
            document.getElementById("seemeimg1").style.display="none";
            document.getElementById("seemeimg2").style.display="block";
            document.getElementsByClassName("payNumDiv")[0].style.display="block";
            canSee=true;
        }else if(document.getElementById("seemeimg2").style.display==="block"){
            document.getElementById("seemeimg1").style.display="block";
            document.getElementById("seemeimg2").style.display="none";
            document.getElementsByClassName("payNumDiv")[0].style.display="none";
            canSee=false;
        }
    });
</script>
<script>
    //获取页面参数
    $.ajax({
        type:"GET",
        url:getCanBeVisited+"?userId="+ $.cookie("MYID"),
        success:function(d){
            if(!d.Data){
                document.getElementById("seemeimg1").style.display="block";
                document.getElementById("seemeimg2").style.display="none";
                document.getElementsByClassName("payNumDiv")[0].style.display="none";
                canSee=false;
            }else{
                document.getElementById("seemeimg2").style.display="block";
                document.getElementById("seemeimg1").style.display="none";
                document.getElementsByClassName("payNumDiv")[0].style.display="block";
                canSee=true;
            }
        }
    });
    $.ajax({
        type:"GET",
        url:getSeeFee+"?userId="+ $.cookie("MYID"),
        success:function(d){
            var oldNum=parseFloat(d.Data)/100;
            $("#moneyInput").val(oldNum);
        }
    });

    var isSave=false;
    function saveChange(){
        $(".errorWord").html("");
        if(canSee){
            if(/^[1-9](\d+)?$/.test($("#moneyInput").val())){
                if(!isSave){
                    isSave=true;
                    var num=$("#moneyInput").val();
                    saveFtn(1,num);
                }
            }else{
                $(".errorWord").html("金额有误,最小1元");
            }
        }else{
            if(!isSave){
                isSave=true;
                saveFtn(0,0);
            }
        }
    }
    function saveFtn(state,num){
        $("#waitplace").css("display","block");
        var newNum=parseFloat(num)*100;
        $.ajax({
            type:"POST",
            url:updateCanBeVisited,
            data:{
                "optype":state,
                "userId": $.cookie("MYID"),
                "score":newNum
            },
            success:function(d){
                $("#waitplace").css("display","none");
                history.go(-1);
            }
        })
    }

    $("#moneyInput").on("input propertychange",function(){
        $("#moneyInput").val(Math.round($("#moneyInput").val()));
    })
</script>
</body>
</html>